<script setup lang="ts">
import checkIcon from '@/static/images/check.png'

const props = defineProps<{
  // 初始值
  initialValue?: number[]
  // 需要渲染的源数据
  sourceData: Array<any> | null
  // 树状结构中用于表示值和表示后代 item 的 property 的名称
  objKeys: {
    value: string
    children: string
  }
  // Tab 选项卡配置
  tabs: Array<{ index: number, name: string }>
}>()

const emit = defineEmits(['change'])

/* -------------------------------- Tab START ------------------------------- */
const selectedTabIndex = ref(0)

function handleSelectTab(item: { index: number, name: string }) {
  selectedTabIndex.value = item.index
}
/* --------------------------------- Tab END -------------------------------- */

/* ------------------------------- Value START ------------------------------ */
const selectedValue = ref<number[]>([])

onMounted(() => {
  if (props.initialValue)
    selectedValue.value = props.initialValue
  else
    selectedValue.value = [0, 0, 0]
})

function handleSelectItem(index: number) {
  const newVal = [...selectedValue.value]
  newVal[selectedTabIndex.value] = index
  selectedValue.value = newVal
  emit('change', getCityNameByIndex(newVal))

  if (selectedTabIndex.value < props.tabs.length - 1)
    selectedTabIndex.value += 1
}

function getCityNameByIndex(indexes: number[]) {
  const result: any[] = []

  const findItem = (currentData: any[], currentLevel: number) => {
    const currentIndex = indexes[currentLevel]
    const currentItem = currentData[currentIndex]

    if (currentItem) {
      const { name } = currentItem
      result.push({ index: currentIndex, name })

      if (currentItem.childs && currentLevel < indexes.length - 1)
        findItem(currentItem.childs, currentLevel + 1)
    }
  }

  findItem(props.sourceData!, 0)
  return result
}
/* -------------------------------- Value END ------------------------------- */

/* ----------------------------- 递归查找列表数据 START ----------------------------- */
const findChildByIndex: any = (data: any[], indexList: number[], currentIndex: number) => {
  // 达到索引列表的末尾，返回当前数据
  if (currentIndex === indexList.length)
    return data
  const currentChildIndex = indexList[currentIndex]
  // 获取下一级数据数组
  const nextLevelData = data[currentChildIndex][props.objKeys.children] as any[] || []
  return findChildByIndex(nextLevelData, indexList, currentIndex + 1)
}

function currentList(value: number[]) {
  // 如果选择的 tab 超出范围，直接中断函数
  if (selectedTabIndex.value > value.length - 1)
    return []
  // 选择将要自上而下递归的层级
  const indexList = value.slice(0, selectedTabIndex.value)
  // 从 sourceData 的根结点开始递归
  const rootData = props.sourceData
  // 开始递归
  return findChildByIndex(rootData, indexList, 0) || []
}
/* ----------------------------- 递归查找列表数据 END ----------------------------- */
</script>

<template>
  <view>
    <uv-tabs
      :current="selectedTabIndex"
      :list="tabs"
      line-color="#FF6D0A"
      :active-style="{ color: '#FF6D0A' }"
      :inactive-style="{ color: '#000000' }"
      scrollable
      @change="handleSelectTab"
    />
    <view class="w-auto h-50vh overflow-scroll">
      <uv-list>
        <uv-list-item
          v-for="item, index in currentList(selectedValue)" :key="index" clickable
          @tap="() => handleSelectItem(index)"
        >
          <view class="flex justify-between items-center px-30rpx py-32rpx min-h-100rpx">
            <view class="text-30rpx leading-30rpx text-black">
              {{ item.name }}
            </view>
            <image
              v-if="selectedValue[selectedTabIndex] === index"
              class="w-36rpx h-36rpx"
              :src="checkIcon"
            />
          </view>
        </uv-list-item>
      </uv-list>
    </view>
  </view>
</template>
